<template>
	<view class="detail-container">
		<u-toast ref="uToast"></u-toast>
		<!-- 上面年份部分 -->
		<view class="tip-icon-container">
			<view class="tip-left">
				<tip :isYellow="true" :message="accountBooks[accountBookIndex] ? accountBooks[accountBookIndex].name : ''" @showSelectTimeFunction="changeFlag('isAcconutBookListFlag', true)"></tip>
			</view>
			<view class="tip-center">
				<year :year="year" @changeYearCallback="changeYear"></year>
			</view>
			<view class="right-icon-container" >
				<view :class="['right-icon-date-content-container', {'showBgcColor': showMonthFlag}, {'unshowBgcColor': !showMonthFlag}, ]" @click="changeShowMonthFlag">
					<u-icon name="calendar" :color="showMonthFlag ? '#4d4f91' : '#9a9a9a'" size="28"></u-icon>
					<!-- <view :class="['right-icon-date-content-icon iconfont icon-rili', {'showColor': showMonthFlag}, {'unshowColor': !showMonthFlag}]"></view> -->
				</view>
			</view>
		</view>
		<view class="month-container">
			<month-card ref="monthCard" :month="month" :showMonthFlag="showMonthFlag" :billResultVo="billResultVo" @selectMonth="selectMonth" @doubleClick="doubleClick"></month-card>
		</view>
		<view class="bill-container">
			<!-- 账单明细内容 -->
			<bill-list ref="billList" @deleteBill="deleteBillCallback" :height="700" :billDataVoList="billDataVoList" :flag="true" @selectBill="selectBill"></bill-list>
		</view>
		<!-- 双击账户后账户明细组件弹框 -->
		<u-popup :show="showBillDetailFlag" :round="20" mode="bottom" @close="changeFlag('showBillDetailFlag', false)" @open="changeFlag('showBillDetailFlag', true)">
			<bill-detail @saveOrUpdate="saveOrUpdateBill" :categoryList="categoryList" @closeBtn="changeFlag('showBillDetailFlag', false)" :bill="bill"></bill-detail>
		</u-popup>
		<!-- 账本列表 -->
		<u-popup :show="isAcconutBookListFlag" :round="20" mode="top" @close="changeFlag('isAcconutBookListFlag', false)" @open="changeFlag('isAcconutBookListFlag', true)">
			<account-book-list @selectAccountBook="selectAccountBook" :accountBookList="accountBooks" @closeBtn="changeFlag('isAcconutBookListFlag', false)"></account-book-list>
		</u-popup>
	</view>
</template>

<script>
	import accountBookList from '@/components/account-book-list/account-book-list.vue';
	import year from '@/components/year/year.vue';
	import tip from '@/components/tip/tip';
	import billDetail from '@/components/bill-detail/bill-detail';
	import monthCard from './components/month-card/month-card.vue';
	export default {
		components: {
			monthCard, tip, billDetail, accountBookList, year
		},
		data() {
			return {
				billDataVoList: [],									// 每天的数据
				month: {},											// 月份
				billResultVo: {},									// tabbar页数据结果
				year: -1,											// 年份
				accountBooks: [],									//账本列表
				isAcconutBookListFlag: false,						// 显示账本列表
				accountbookName: '牛逼',								// 账本名字
				showMonthFlag: true,								// 是否显示月份
				showBillDetailFlag: false,							// 显示账单明细组件
				bill: {},											// 账户对象
				accountBookIndex: 0,								// 选择的账本索引，根据此索引获取账本后在获取分类集合
				categoryList: [],									// 分类集合
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 删除回调
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			deleteBillCallback(item, index) {
				console.log('item', item);
				console.log('index', index);
				var that = this;
				if (item.id) {
					that.confirm('警告', '确定删除吗', () => {
						that.$req.deleteBill(item.id).then(res => {
							if (res.success) {
								setTimeout(() => {
									that.getData();
								}, 1000)
							} else {
								that.errorTips(that.$refs.uToast, res.message, null);
							}
						})
					})
					
				} else {
					that.errorTips(that.$refs.uToast, "获取该行的数据id失败", null);
				}
			},
			/** 改变年份
			 * @param {Object} year 年份
			 */
			changeYear(num) {
				this.year = this.year + num;
				this.init();
			},
			/**
			 * 操作账单，新增，或者修改
			 */
			saveOrUpdateBill() {
				var that = this;
				if (this.bill && this.bill.id) {
					// 修改账单
					that.$req.updateBill(this.bill).then(res => {
						if (res.success) {
							that.msg("修改成功");
							that.changeFlag('showBillDetailFlag', false);
							// that.successTips(that.$refs.uToast, "修改成功", '');
							that.getData();
						} else {
							that.msg(res.message);
						}
					})
				} else {
					that.$req.insertBill(this.bill).then(res => {
						if (res.success) {
							that.successTips(that.$refs.uToast, "新增成功", '');
							setTimeout(() => {
								that.changeFlag('showBillDetailFlag', false);
								that.getData();
							}, 200)
						} else {
							that.msg(res.message);
						}
					})
				}
			},
			/** 选择账本回调
			 * @param {Object} item 选中的账本
			 * @param {Object} index 索引
			 */
			selectAccountBook(item, index1) {
				this.accountBooks.forEach((item, index) => item.selected = index == index1);
				this.changeFlag('isAcconutBookListFlag', false);
				this.accountBookIndex = index1;
				this.bill.accountBookId = item.id;
				this.bill.accountBookName = item.name;
				this.categoryList = [];
				this.categoryList.push(...this.accountBooks[this.accountBookIndex].incomeCategoryList);
				this.categoryList.push(...this.accountBooks[this.accountBookIndex].payCategoryList);
				// 选择账本id后请求数据
				this.init();
			},
			/**
			 * 单击选择月份
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			selectMonth(item, index) {
				console.log(item, "rew");
				this.month = item.name;
				if (this.billResultVo.yearBillOtherVoMap && this.billResultVo.yearBillOtherVoMap[this.month]) {
					this.billDataVoList = this.billResultVo.yearBillOtherVoMap[this.month].billDataVoList;
					this.$refs.monthCard.$forceUpdate();
					this.$refs.billList.$forceUpdate();
				} else {
					this.billDataVoList = [];
				}
			},
			/**
			 * 
			 */
			open() {},
			/** 双击月份回调 - 新增账单
			 * @param {Object} item 对象 月份对象
			 * @param {Object} index 索引 (月份)
			 */
			doubleClick(item, index) {
				console.log("双击回调");
				this.bill = {};
				this.bill.monthStr = item.name;
				this.bill.time = '';
				this.bill.money = '';
				this.bill.yearStr = this.year;
				this.bill.accountBookId = this.accountBooks[this.accountBookIndex].id;
				this.bill.accountBookName = this.accountBooks[this.accountBookIndex].name;
				this.selectMonth(item, index);
				this.changeFlag('showBillDetailFlag', true);
			},
			/**	切换是否显示新增账户弹窗
			  * @param {Object} name 组件flag名字
			  * @param {Object} flag 是否显示
			  */
			changeFlag(name, flag) {
				this[name] = flag;
			},
			/**
			 * 修改回调
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			selectBill(item, index) {
				this.bill = JSON.parse(JSON.stringify(item));
				console.log('this.bill', this.bill);
				this.changeFlag('showBillDetailFlag', true);
			},
			/**
			 * 切换是否显示月份
			 */
			changeShowMonthFlag() {
				this.showMonthFlag = !this.showMonthFlag;
			},
			/**
			 * 查询全部的账本 由于需要此方法先执行，然后再执行init()，所以两个子方法中也必须加上（函数名前 + async，请求前 + await），
			 * 最后一个不加没关系，因为它后面没有被依赖。如果还有方法需要拿到init后的数据来请求的话就需要了
			 */
			async getAccountBookList() {
				var that = this;
				await that.$req.getAccountBookList().then(res => {
					res.data.forEach(item => console.log(item.selected))
					if (res.success) {
						that.accountBooks = res.data;
						that.bill.accountBookName = that.accountBooks[that.accountBookIndex].name;
						this.bill.accountBookId = that.accountBooks[that.accountBookIndex].id;
						that.categoryList = [];
						that.categoryList.push(...res.data[that.accountBookIndex].incomeCategoryList);
						that.categoryList.push(...res.data[that.accountBookIndex].payCategoryList);
					} else {
						that.accountBooks = [];
						that.categoryList = [];
						that.errorTips(that.$refs.uToast, res.message, null);
					}
				})
			},
			/**
			 * TODO-next 查询账单
			 */
			async init() {
				var that = this;
				var params = "parentId=" + that.accountBooks[that.accountBookIndex].id;
				if (this.year) {
					params += "&year=" + this.year;
				}
				that.$req.getData(params).then(res => {
					if (res.success) {
						that.billResultVo = res.data;
						console.log(this.month, "月份");
						// TODO  为了测试数据
						this.month = new Date().getMonth() + 1;
						// that.successTips(that.$refs.uToast, res.message, null);
						// 处理账单数据 
						if (this.billResultVo.yearBillOtherVoMap && this.billResultVo.yearBillOtherVoMap[this.month]) {
							this.billDataVoList = this.billResultVo.yearBillOtherVoMap[this.month].billDataVoList;
							// this.$ref.billListRef.$forceUpdate();
							this.$refs.monthCard.$forceUpdate();
							this.$refs.billList.$forceUpdate();
						}
						console.log(this.billDataVoList, "数据")
					} else {
						that.errorTips(that.$refs.uToast, res.message, null);
						this.billResultVo = {};
						this.billDataVoList = [];
						this.$refs.monthCard.$forceUpdate();
						this.$refs.billList.$forceUpdate();
					}
				})
			},
			/**
			 * 获取页面数据，等待先查询账本数据，拿到账本数据后根据索引取出账本id，然后查询账单数据
			 */
			async getData() {
				await this.getAccountBookList();
				await this.init();
			}
		},
		created() {
			var date = new Date();
			this.year = date.getFullYear();
			this.month = date.getMonth() + 1; 
			this.getData();
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			this.getData();
			uni.stopPullDownRefresh();
		},
		/** 监听屏幕滑动距离
		 * @param {Object} e
		 */
		onPageScroll(e) {
			console.log("滑动距离" + e.scrollTop)
		},
	}
</script>

<style  lang="scss">
	/* 设置背景颜色 */
	page {
		background-color: $themeColor;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		width: 100vw;
		min-height: calc(100vh - 250rpx);
	}
	
	.detail-container {
		width: 100%;
		height: 100%;
		padding: 35rpx;
		box-sizing: border-box;
		.tip-icon-container {
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.tip-left {
				width: 120rpx;
				height: 100%;
			}
			
			.tip-center {
				width: 300rpx;
				height: 100%;
			}
			
			.right-icon-container {
				width: 100rpx;
				height: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-weight: bold;
				.right-icon-date-content-container {
					width: 60%;
					height: 120%;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.right-icon-date-content-icon {

					}
				}
			}
		}
		.month-container {
			width: 100%;
			min-height: 105rpx;
			margin-top: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.bill-container {
			margin-top: 30rpx;
			border-radius: 20rpx;
			width: 100%;
			min-height: 500rpx;
			box-sizing: border-box;
		}
	}
	
	.showColor {
		color: $themePurpleColor;
	}
	.unshowColor {
		color: $themeIconGreyColor;
	}
	
	.showBgcColor {
		background-color: $themeBgcLightYellowColor;
	}
	
	.unshowBgcColor {
		background-color: $themeBgcLightGreyColor;
	}

</style>
